<template>
  <template v-if="containerStyle && containerStyle !== 'Tip'">
    <GdContainer
      :container-type="containerType"
      v-model="bind_isShowContainer"
      draggable
      :close-on-click-modal="false"
      :title="containerTitle"
      :append-to-body="containerAttr?.appendToBody ?? false"
      :width="containerAttr?.width ?? '60%'"
      center
      v-bind="$attrs"
      @changeFullscreen="onChangeFullscreen"
    >
      <div
        v-if="isShowContainer"
        :class="{
          'full-screen-slot': isFullscreen,
          'default-screen-slot': !isFullscreen,
        }"
      >
        <!-- 52.5vh -->
        <slot></slot>
      </div>

      <template #footer>
        <span class="dialog-footer">
          <GdButton
            v-for="btnConfig in allBtnsConfig"
            :type="btnConfig.componentAttr.type"
            @click.stop="
              btnConfig.onClick({
                rowIdx: eventFromConfig.rowIdx,
                rowData: eventFromConfig.rowData,
                formData: eventFromConfig.formData,
                metaKey: btnConfig.key,
                metaItem: btnConfig,
              })
            "
            :key="btnConfig.key"
          >
            {{ btnConfig.label }}
          </GdButton>
        </span>
      </template>
    </GdContainer>
  </template>
  <template v-else-if="containerStyle === 'Tip'">
    <GdContainer
      :container-type="containerType"
      v-model="bind_isShowContainer"
      :title="'提示'"
      :append-to-body="containerAttr?.appendToBody ?? false"
      width="40%"
      center
    >
      <view style="text-align: center">
        {{ containerAttr?.tipMessage ?? `是否执行 ${containerTitle} 操作?` }}
      </view>

      <template #footer>
        <span class="dialog-footer">
          <GdButton
            v-for="btnConfig in allBtnsConfig"
            :type="btnConfig.componentAttr.type"
            @click.stop="
              btnConfig.onClick({
                rowIdx: eventFromConfig.rowIdx,
                rowData: eventFromConfig.rowData,
                formData: eventFromConfig.formData,
                metaKey: btnConfig.key,
                metaItem: btnConfig,
              })
            "
            :key="btnConfig.key"
          >
            {{ btnConfig.label }}
          </GdButton>
        </span>
      </template>
    </GdContainer>
  </template>
</template>
<script>
export default {
  inheritAttrs: false,
};
</script>
<script setup>
import { ref, watch, computed, toRef } from "vue";
import { useComputedMergeAllBtnsConfig } from "@gd-accbuild-ui/hooks/useComputedMergeAllBtnsConfig";
import GdButton from "@gd-accbuild-ui/gd-ui/gd-button/gd-button.vue";
import GdContainer from "@gd-accbuild-ui/gd-ui/gd-container/gd-container.vue";
const props = defineProps({
  containerType: {
    type: String,
    default: "Dialog",
  },
  isShowContainer: {
    type: Boolean,
    default: false,
  },
  containerAttr: {
    type: Object,
  },
  eventFromConfig: {
    type: Object,
    default: () => ({
      rowIdx: null,
      rowData: null,
      formData: null,
    }),
  },
});
const emits = defineEmits(["update:isShowContainer", "do-operation"]);

const bind_isShowContainer = computed({
  get() {
    return props.isShowContainer;
  },
  set(value) {
    emits("update:isShowContainer", value);
  },
});
const onClick = (params) => {
  emits("do-operation", { eventFrom: "container", ...params });
  if (params.metaKey === "buildInContainerCancelBtn") {
    emits("update:isShowContainer", false);
  }
};
const buildInBtnsDefaultConfig = {
  buildInContainerCancelBtn: {
    key: "buildInContainerCancelBtn",
    label: "取消",
    isShow: true,
    onClick: onClick,
    componentAttr: {
      type: "primary",
      //icon: Plus,
    },
  },
  buildInContainerSubmitBtn: {
    key: "buildInContainerSubmitBtn",
    label: "保存",
    isShow: true,
    onClick: onClick,
    componentAttr: {
      type: "warning",
      //icon: Delete,
    },
  },
};
const containerTitle = computed(() => {
  return props.containerAttr?.title ?? "";
});
const containerStyle = computed(() => {
  return props.containerAttr?.containerStyle ?? "Dialog";
});
const allBtnsConfig = useComputedMergeAllBtnsConfig(
  toRef(props, "containerAttr"),
  { buildInBtnsDefaultConfig, emits }
);

const isFullscreen = ref(false);
const onChangeFullscreen = (val) => {
  isFullscreen.value = val;
};
</script>
<style lang="scss" scoped>
.full-screen-slot {
  max-height: calc(
    100vh - 190px
  ); //header:64.5px、footer: 62px、margin-bottom:10px
  overflow: auto;
}
.default-screen-slot {
  max-height: calc(79vh - 190px); //52.5vh;
  overflow: auto;
  //overflow-y: hidden;
}
</style>
<style lang="scss">
/* .el-dialog__body .el-form {
  max-height: 65vh;
  height: 65vh;
} */
</style>
